<template>
  <div class="runningbar" ref="container"></div>
</template>

<script>
import echarts from "echarts";
import { getRunning } from "../assets/api/api";

export default {
  data() {
    return {
      data: [],
      chart: null,
      conf: {
        grid: {
          top: 75,
          bottom: 110,
        },
        legend: {
          top: 30,
          right: "10%",
          show: true,
          textStyle: {
            fontFamily: "Arial",
            color: "#3b95d2",
            fontSize: 20,
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#3b95d2",
              width: 1,
            },
          },
          axisLabel: {
            color: "#3b95d2",
            fontSize: 26,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              width: 2,
              color: "#3b95d2",
            },
          },
          axisLabel: {
            color: "#3b95d2",
            fontSize: 26,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#3b95d2",
              width: 1,
            },
          },
        },
        dataset: {
          source: [],
        },
        series: [
          {
            name: "失败",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(152,55,221, .2)",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#9837dd" },
                { offset: 1, color: "#e23af5" },
              ]),
            },
            seriesLayoutBy: "row",
          },
          {
            name: "成功",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(56,160,214, .2)",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#38a0d6" },
                { offset: 1, color: "#6dcde6" },
              ]),
            },
            seriesLayoutBy: "row",
          },
        ],
      },
    };
  },
  mounted() {
    let chart = echarts.init(this.$refs.container);
    let conf = this.conf;
    chart.setOption(conf);
    this.chart = chart;

    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
    this.chart.dispose();
  },
  methods: {
    fetchData() {
      getRunning().then((res) => {
        let data = res.data.result;
        this.updateData(data);
      });
    },
    updateData(data) {
      this.chart.setOption({
        dataset: {
          source: data,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.runningbar {
  width: 100%;
  height: 100%;
}
</style>
